<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 500px;
            height: 397px;
            border: 2px solid;
            margin: 0 auto;
            position: relative;
        }
        ul{
            margin: 0;
            list-style: none;
            position: relative;
        }
        .img-list li{
            position: absolute;
            top: 0;
            left: 0;
            display: none;
        }
        .img-list li img{
            width: 100%;
        }
        .img-list .current{
            display: block;
        }
        .index{
            /* width: 100%; */
            position: absolute;
            bottom: 20px;
            display: flex;
            left: 10px;
            justify-content: center;
        }
        .index li{
            width: 10px;
            height: 10px;
            background-color:rgb(150, 150, 150);
            margin:0 5px;
            border-radius: 50%;
        }
        .index .active{
            background-color:rgb(255, 255, 255) ;
        }
        .img-click .btn{
            width: 20px;
            height: 31px;
            background-color: rgba(187, 186, 186, 0.8);
            position: absolute;
            top: calc(50% - 15px);
            /* display: none; */
            line-height: 30px;
            text-align: center;
            color: aliceblue;
        }
        .img-click .btn:hover{
            background-color: rgb(122, 122, 122);
        }
        .img-click .prev{
           border-radius: 0% 50% 50% 0% ;
            left: 0px;
        }
        .img-click .next{
            border-radius: 50% 0% 0% 50% ;
            right: 0px;
        }
    </style>
</head>
<body>
    <section class="box">
        <ul class="img-list">
            <li class="current"><img src="img/1.jpg" alt="text"></li>
            <li><img src="img/2.jpg" alt="text"></li>
            <li><img src="img/3.jpg" alt="text"></li>
            <li><img src="img/4.jpg" alt="text"></li>
            <li><img src="img/5.jpg" alt="text"></li>
        </ul>
        <ul class="index">
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <div class="img-click">
            <span class="btn prev">&lt;</span>
            <span class="btn next">&gt;</span>
        </div>
    </section>
    <script src="jQuery.js"></script>
    <script>

        var index = 0;//初始化下标
        var lastIndex = 0;
        var timer;
        // 上一张
        function prevImg(){
            index = index == 0 ? index = $("img").length - 1 : index - 1;
            showImg();
        }
        // 下一张
        function nextImg(){
            index = index ==  $("img").length-1  ? 0 : index + 1;
            showImg();
        }
        // 展示照片
        function showImg(){
            $('.img-list li').eq(lastIndex).removeClass('current');
            $('.index li').eq(lastIndex).removeClass('active');

            $('.img-list li').eq(index).addClass('current');
            $('.index li').eq(index).addClass('active');
            // 记录上一次索引
            lastIndex = index;
        }

        // 1.自动切换
        timer = setInterval(nextImg,1000);

        // 2.五个小按钮点击/移入切换

        $(".index li").click(function(){
          index = $(this).index();
          showImg();
       })

    
  
        // 3.点击上一张/下一张切换
        $('.prev').click(function(){
            prevImg();
        });
        $('.next').click(function(){
            nextImg();
        });
        // 初始化让按钮隐藏，移入box元素显示按钮,并且移入box元素计时器停止移出继续。
        // $('.box').hover(function(){
        //     clearInterval(timer);//清除计时器
        //     timer = null;
        //     $('.prev').css('display', 'block');
        //     $('.next').css('display', 'block');
        // }, function(){
        //     if(timer){
        //         return;
        //     }
        //     timer = setInterval(nextImg,1000);
        //     $('.prev').css('display', 'none');
        //     $('.next').css('display', 'none');
        // });
        


    </script>
</body>
</html>